<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax测试</title>

<style>
	.pcls:hover{
		background-color: #4984FD;
		cursor: pointer;
	}

</style>
		
</head>
<body>
<div id="container">
	<div id="input" style="width: 300px;">
		输入省份：<input id="inp" type="text" name="province" /><button id="queryBtn">查询</button>
	</div>
	<div id="tip" style="border:1px solid black; width: 300px; height:300px; overflow:scroll; margin-top: 5px; display:none;">
	</div>

</div>
	<script type="text/javascript">
		window.onload = function(){
			//通过闭包获取ajax对象
			var ajax = ajaxFactory();
			var render = renderFactory();
			var target = document.getElementById("tip");
			var queryBtn = document.getElementById("queryBtn");
			var inp = document.getElementById("inp");

			queryBtn.addEventListener("click",function(){
				var inpValue = inp.value;
				ajax.get("http://localhost:8090/ajaxdemo/province/query",["province"],[inpValue],function(obj){
					render.render(target, obj);
					render.addEvent("pcls","click",function(){
						var text = this.innerHTML;
						inp.value = text;
				 	});
				});
			});
			inp.addEventListener("keyup",function(){
				 var inputText = this.value;
				 ajax.get("http://localhost:8090/ajaxdemo/province/query",["province"],[inputText],function(obj){
				 	render.render(target, obj);
				 	render.addEvent("pcls","click",function(){
				 		var text = this.innerHTML;
						inp.value = text;
				 	});
				 });
			});
			inp.addEventListener("focus",function(){
				target.style.display = "block";
			});
				
			//渲染工厂
			function renderFactory(){
				var o = {};

				//清楚Target上的子元素
				o.removeChild = function(target){
					var childs = target.childNodes;
					for(var i = childs.length - 1; i >= 0; i--) { 					 
						target.removeChild(childs[i]);
					}
				}

				//渲染指定Target
				o.render = function(target,data){
					if(Array.isArray(data)){
						this.removeChild(target);
						data.forEach((item,index,ary)=>{
							var pNode = document.createElement("p");
							pNode.setAttribute("class","pcls");
							pNode.innerHTML = item.province;
							target.appendChild(pNode);
						});
					}
				}
				
				//渲染后添加事件
				o.addEvent = function(className, event, fn){
					var nodes = document.getElementsByClassName(className);
					if(nodes.length>0){
						for(let i = 0; i < nodes.length; i++){
							nodes[i].addEventListener(event, fn);
						}
					}
				}
				
				return o;
			}

			//Ajax 闭包
			function ajaxFactory(){
				var o = {};
				var reg = /^[\u4e00-\u9fa5]$/;
				//Get请求
				o.get = function(url, params, values,fn){
					var xhr = new XMLHttpRequest();
					var str="";

					//拼接Get请求参数
					for(let i = 0; i < values.length; i++){
						//如果是中文，Encode
						if(reg.test(values[i])){
							str+=params[i]+"="+encodeURIComponent(values[i]);
						}else{
							str+=params[i]+"="+values[i];
						}
						
						if(i!=params.length-1){
							str+="&";
						}
					}
					url = (""!=str)?(url+"?"+str):url;
					xhr.open("GET", url);
					xhr.onreadystatechange=function(){
						if(xhr.readyState == 4 && xhr.status == 200){
							var jsonObj = JSON.parse(xhr.responseText);
							//执行回调函数
							fn(jsonObj);
						}
					};
					xhr.send(null);
				}
				return o;
			}
		}
	</script>
</body>
</html>